ติดตั้ง Tailwind CSS ด้วย Nuxt

บทนำ: ทำไมต้อง Tailwind CSS กับ Nuxt?

Tailwind CSS และ Nuxt.js เป็นสองเครื่องมือที่ทรงพลังในโลกของการพัฒนาเว็บสมัยใหม่ Tailwind CSS นำเสนอแนวคิด Utility-First CSS ที่ช่วยให้คุณสร้าง UI ได้อย่างรวดเร็วโดยไม่ต้องออกจาก HTML ในขณะที่ Nuxt.js เป็น Framework ที่ยอดเยี่ยมสำหรับ Vue.js ที่ช่วยให้คุณสร้างแอปพลิเคชันแบบ Server-Side Rendering (SSR), Static Site Generation (SSG) และอื่นๆ ได้อย่างง่ายดาย การผสานรวมทั้งสองเข้าด้วยกันจะช่วยเร่งกระบวนการพัฒนาและเพิ่มความยืดหยุ่นในการออกแบบได้อย่างมหาศาล

บทความนี้จะนำคุณไปสู่ขั้นตอนการติดตั้ง Tailwind CSS ในโปรเจกต์ Nuxt (เวอร์ชัน 3) โดยใช้ Nuxt Tailwind CSS Module ซึ่งเป็นวิธีที่ง่ายและมีประสิทธิภาพที่สุด

สิ่งที่ต้องมี

• Node.js (เวอร์ชัน LTS แนะนำ)
• npm หรือ Yarn
• ความรู้พื้นฐานเกี่ยวกับ Nuxt.js และ Vue.js

ขั้นตอนที่ 1: สร้างโปรเจกต์ Nuxt ใหม่

เริ่มต้นด้วยการสร้างโปรเจกต์ Nuxt 3 โดยใช้คำสั่ง nuxi:

npx nuxi init my-nuxt-tailwind-app

จากนั้น เข้าสู่ไดเรกทอรีของโปรเจกต์และติดตั้ง Dependencies:

cd my-nuxt-tailwind-app
npm install  # หรือ yarn install / pnpm install

ขั้นตอนที่ 2: ติดตั้ง Nuxt Tailwind CSS Module

ใน Nuxt 3 การติดตั้ง Tailwind CSS ทำได้ง่ายมากด้วย Module เฉพาะสำหรับ Nuxt:

npm install -D @nuxtjs/tailwindcss

หลังจากติดตั้ง Module แล้ว คุณจะต้องเพิ่มมันเข้าไปในไฟล์ nuxt.config.ts ของคุณ:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss'
  ],
  // หากต้องการปรับแต่ง Tailwind เพิ่มเติม สามารถระบุที่นี่ได้เลย
  tailwindcss: {
    // configPath: '~/tailwind.config.js', // สามารถกำหนด path ของไฟล์ config ได้
    // cssPath: '~/assets/css/tailwind.css', // สามารถกำหนด path ของไฟล์ CSS หลักได้
  }
})

เมื่อเพิ่ม Module เข้าไปแล้ว Nuxt จะจัดการที่เหลือให้เอง เช่น การสร้างไฟล์ tailwind.config.js และการรวม Tailwind เข้ากับ PostCSS ของโปรเจกต์

ขั้นตอนที่ 3: ปรับแต่ง Tailwind CSS (ไม่บังคับ)

Nuxt Tailwind CSS Module จะสร้างไฟล์ tailwind.config.js ให้โดยอัตโนมัติที่รูทของโปรเจกต์ (หากยังไม่มี) คุณสามารถแก้ไขไฟล์นี้เพื่อปรับแต่ง Theme, Colors, Fonts, Breakpoints หรือเพิ่ม Plugins ของ Tailwind ได้ตามต้องการ

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{vue,js,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {
      // เพิ่มสีที่กำหนดเอง
      colors: {
        primary: '#3490dc',
        secondary: '#ffed4a',
      }
    },
  },
  plugins: [
    // require('@tailwindcss/forms'), // ตัวอย่างการเพิ่ม Plugin
  ],
}

หากคุณต้องการมีไฟล์ CSS หลักสำหรับ Tailwind (เช่น เพื่อเพิ่ม @apply หรือ CSS พื้นฐานอื่นๆ) คุณสามารถสร้างไฟล์ ~/assets/css/tailwind.css และ Module จะรวมมันให้โดยอัตโนมัติ (หรือระบุ cssPath ใน nuxt.config.ts)

ขั้นตอนที่ 4: เริ่มใช้งาน Tailwind CSS

ตอนนี้คุณสามารถใช้คลาสของ Tailwind CSS ในไฟล์ Vue Components หรือ Pages ของคุณได้แล้ว ลองแก้ไขไฟล์ app.vue เพื่อดูผลลัพธ์:

<template>
  <div class="min-h-screen bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center p-4">
    <div class="text-center p-8 bg-white rounded-xl shadow-2xl max-w-md w-full animate-fade-in-up">
      <h1 class="text-4xl font-extrabold text-gray-900 mb-4 tracking-tight">
        <span class="text-indigo-600">สวัสดี</span> Tailwind & Nuxt!
      </h1>
      <p class="text-lg text-gray-700 leading-relaxed mb-6">
        การติดตั้งสำเร็จแล้ว! คุณพร้อมที่จะสร้างสรรค์ด้วย Utility-First CSS
        และ Framework ที่น่าทึ่งอย่าง Nuxt.js
      </p>
      <button class="bg-indigo-700 hover:bg-indigo-800 text-white font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-indigo-300 focus:ring-opacity-75"
              @click="alert('ยินดีต้อนรับสู่โลกของ Tailwind & Nuxt!')">
        เริ่มสร้างเลย!
      </button>
    </div>
  </div>
</template>

<style>
/* เพิ่มคีย์เฟรมสำหรับแอนิเมชัน */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}
</style>

รัน Nuxt Development Server:

npm run dev

เปิดเบราว์เซอร์ไปที่ http://localhost:3000 เพื่อดูผลลัพธ์ คุณจะเห็นหน้าเว็บที่จัดรูปแบบด้วย Tailwind CSS อย่างสวยงาม

สรุป

การติดตั้ง Tailwind CSS ในโปรเจกต์ Nuxt.js นั้นทำได้ง่ายและรวดเร็วด้วยการใช้ Nuxt Tailwind CSS Module ด้วยการตั้งค่าเพียงไม่กี่ขั้นตอน คุณก็สามารถปลดล็อกพลังของ Utility-First CSS เพื่อสร้าง UI ที่สวยงามและตอบสนองได้อย่างรวดเร็ว ลองนำ Tailwind CSS ไปใช้ในโปรเจกต์ Nuxt ถัดไปของคุณดูสิ แล้วคุณจะพบว่าการพัฒนาเว็บไม่ใช่เรื่องยากอีกต่อไป ขอให้สนุกกับการโค้ดดิ้ง!